<script setup lang="ts">
import { ref } from 'vue'

// 日期选择
const startDate = ref('2023-06-01')
const endDate = ref('2023-06-05')

// 出血量选择
const flowOptions = [
    { icon: '💧', label: '很少' },
    { icon: '💧💧', label: '较少' },
    { icon: '💧💧💧', label: '中等' },
    { icon: '💧💧💧💧', label: '较多' },
    { icon: '💧💧💧💧💧', label: '很多' }
]
const selectedFlow = ref(1)

// 症状选择
const symptoms = [
    { icon: 'bolt', label: '腹痛', selected: true },
    { icon: 'head-side-virus', label: '头痛', selected: false },
    { icon: 'dizzy', label: '疲劳', selected: true },
    { icon: 'fire', label: '潮热', selected: false },
    { icon: 'baby', label: '乳房胀痛', selected: false },
    { icon: 'weight', label: '浮肿', selected: false },
    { icon: 'utensils', label: '食欲不振', selected: false },
    { icon: 'bacon', label: '暴食', selected: false }
]
const selectedSymptoms = ref(symptoms)

// 情绪选择
const moods = [
    { emoji: '😊', label: '开心', selected: false },
    { emoji: '😌', label: '平静', selected: false },
    { emoji: '😢', label: '忧伤', selected: true },
    { emoji: '😠', label: '烦躁', selected: false },
    { emoji: '😫', label: '疲惫', selected: false }
]
const selectedMood = ref(2)

// 备注
const note = ref('')

// 选择出血量
const selectFlow = (index: number) => {
    selectedFlow.value = index
}

// 选择症状
const toggleSymptom = (index: number) => {
    selectedSymptoms.value[index].selected = !selectedSymptoms.value[index].selected
}

// 选择情绪
const selectMood = (index: number) => {
    selectedMood.value = index
}

// 保存记录
const saveRecord = () => {
    uni.showToast({
        title: '保存成功',
        icon: 'success'
    })
}

// 删除记录
const deleteRecord = () => {
    uni.showModal({
        title: '提示',
        content: '确定要删除这条记录吗？',
        success: function (res) {
            if (res.confirm) {
                uni.showToast({
                    title: '删除成功',
                    icon: 'success'
                })
            }
        }
    })
}

// 返回上一页
const goBack = () => {
    uni.navigateBack()
}

// 显示帮助
const showHelp = () => {
    uni.showToast({
        title: '帮助信息',
        icon: 'none'
    })
}

// 日期选择
const selectDate = (type: 'start' | 'end') => {
    // 在实际项目中，这里应该使用uni-app提供的日期选择组件
    // 由于API限制，这里使用提示消息替代
    uni.showToast({
        title: '请实现日期选择组件',
        icon: 'none'
    })

    // 日期选择完成后的处理逻辑
    // 实际项目中，这里应获取用户选择的日期值
    // if (type === 'start') {
    //   startDate.value = 用户选择的日期;
    // } else {
    //   endDate.value = 用户选择的日期;
    // }
}
</script>

<template>
    <view class="period-record-container">
        <!-- 页面头部 -->
        <view class="header">
            <view class="header-left">
                <text class="back-icon" @click="goBack">
                    <text class="iconfont icon-arrow-left"></text>
                </text>
                <text class="page-title">记录经期</text>
            </view>
            <view class="header-right">
                <text class="help-icon" @click="showHelp">
                    <text class="iconfont icon-question"></text>
                </text>
            </view>
        </view>

        <!-- 主内容区 -->
        <scroll-view class="main-content" scroll-y>
            <!-- 日期选择区域 -->
            <view class="form-section">
                <view class="form-header">日期选择</view>
                <view class="form-group">
                    <view class="form-label">选择经期起止日期</view>
                    <view class="date-picker">
                        <view class="date-field" @click="selectDate('start')">
                            <text>{{ startDate }}</text>
                            <text class="iconfont icon-calendar"></text>
                        </view>
                        <view class="date-separator">至</view>
                        <view class="date-field" @click="selectDate('end')">
                            <text>{{ endDate }}</text>
                            <text class="iconfont icon-calendar"></text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 经期出血量 -->
            <view class="form-section">
                <view class="form-header">出血量</view>
                <view class="form-group">
                    <view class="form-label">选择经期出血量</view>
                    <view class="flow-options">
                        <view
                            v-for="(option, index) in flowOptions"
                            :key="index"
                            :class="['flow-option', { selected: selectedFlow === index }]"
                            @click="selectFlow(index)"
                        >
                            <view class="flow-icon">{{ option.icon }}</view>
                            <view class="flow-label">{{ option.label }}</view>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 症状记录 -->
            <view class="form-section">
                <view class="form-header">症状记录</view>
                <view class="form-group">
                    <view class="form-label">选择经期症状（可多选）</view>
                    <view class="symptom-options">
                        <view
                            v-for="(symptom, index) in selectedSymptoms"
                            :key="index"
                            :class="['symptom-option', { selected: symptom.selected }]"
                            @click="toggleSymptom(index)"
                        >
                            <text class="iconfont" :class="'icon-' + symptom.icon"></text>
                            <text>{{ symptom.label }}</text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 情绪记录 -->
            <view class="form-section">
                <view class="form-header">情绪记录</view>
                <view class="form-group">
                    <view class="form-label">选择当前情绪</view>
                    <view class="mood-options">
                        <view
                            v-for="(mood, index) in moods"
                            :key="index"
                            :class="['mood-option', { selected: selectedMood === index }]"
                            @click="selectMood(index)"
                        >
                            <view class="mood-emoji">{{ mood.emoji }}</view>
                            <text>{{ mood.label }}</text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 备注 -->
            <view class="form-section">
                <view class="form-header">备注</view>
                <view class="form-group">
                    <view class="form-label">添加备注（可选）</view>
                    <textarea
                        class="note-field"
                        placeholder="在这里记录更多细节，如异常症状、用药情况等"
                        v-model="note"
                    ></textarea>
                </view>
            </view>

            <!-- 提交按钮 -->
            <button class="submit-btn" @click="saveRecord">保存记录</button>

            <!-- 删除按钮 -->
            <button class="delete-btn" @click="deleteRecord">删除记录</button>
        </scroll-view>
    </view>
</template>

<style scoped lang="scss">
.period-record-container {
    background-color: #f5f5f5;
    height: 100vh;
}

.header {
    background-color: #ffffff;
    padding: 24rpx 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2rpx solid #f0f0f0;
    height: 88rpx;
}

.header-left {
    display: flex;
    align-items: center;

    .back-icon {
        margin-right: 16rpx;
        font-size: 36rpx;
    }

    .page-title {
        font-size: 34rpx;
        font-weight: 500;
    }
}

.header-right {
    .help-icon {
        color: #999;
        font-size: 36rpx;
    }
}

.main-content {
    height: calc(100vh - 88rpx);
    overflow-y: auto;
    padding-bottom: 40rpx;
}

.form-section {
    background-color: #ffffff;
    margin-bottom: 24rpx;
}

.form-header {
    padding: 24rpx 32rpx;
    font-size: 30rpx;
    font-weight: 600;
    color: #333;
    border-bottom: 2rpx solid #f0f0f0;
}

.form-group {
    padding: 32rpx;
    border-bottom: 2rpx solid #f0f0f0;

    &:last-child {
        border-bottom: none;
    }
}

.form-label {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
}

.date-picker {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16rpx;
}

.date-field {
    flex: 1;
    height: 80rpx;
    border: 2rpx solid #e0e0e0;
    border-radius: 16rpx;
    padding: 0 24rpx;
    font-size: 28rpx;
    color: #333;
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.date-separator {
    padding: 0 24rpx;
    color: #999;
}

.flow-options {
    display: flex;
    flex-wrap: wrap;
    gap: 24rpx;
    margin-top: 16rpx;
}

.flow-option {
    flex: 0 0 calc(33.333% - 16rpx);
    border: 2rpx solid #e0e0e0;
    border-radius: 16rpx;
    padding: 20rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #666;
    background-color: #f9f9f9;

    &.selected {
        border-color: #ff9fb5;
        background-color: #fff0f3;
        color: #ff9fb5;
    }
}

.flow-icon {
    font-size: 40rpx;
    margin-bottom: 8rpx;
}

.flow-label {
    font-size: 24rpx;
}

.symptom-options {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    margin-top: 16rpx;
}

.symptom-option {
    flex: 0 0 calc(25% - 16rpx);
    border: 2rpx solid #e0e0e0;
    border-radius: 40rpx;
    padding: 16rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 24rpx;
    color: #666;
    background-color: #f9f9f9;

    &.selected {
        border-color: #ff9fb5;
        background-color: #fff0f3;
        color: #ff9fb5;
    }

    .iconfont {
        font-size: 32rpx;
        margin-bottom: 4rpx;
    }
}

.mood-options {
    display: flex;
    flex-wrap: wrap;
    gap: 32rpx;
    margin-top: 16rpx;
    padding: 0 16rpx;
}

.mood-option {
    flex: 0 0 calc(20% - 28rpx);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 24rpx;
    color: #666;

    &.selected {
        color: #ff9fb5;
    }
}

.mood-emoji {
    font-size: 56rpx;
    margin-bottom: 8rpx;
}

.note-field {
    width: 100%;
    height: 160rpx;
    border: 2rpx solid #e0e0e0;
    border-radius: 16rpx;
    padding: 24rpx;
    font-size: 28rpx;
    color: #333;
    background-color: #f9f9f9;
    margin-top: 16rpx;
}

.submit-btn {
    width: calc(100% - 64rpx);
    height: 96rpx;
    margin: 48rpx 32rpx;
    background-color: #ff9fb5;
    color: white;
    font-size: 32rpx;
    font-weight: 500;
    border-radius: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    &:disabled {
        background-color: #f0f0f0;
        color: #999;
    }
}

.delete-btn {
    width: calc(100% - 64rpx);
    height: 96rpx;
    margin: 0 32rpx 32rpx;
    background-color: white;
    color: #f44336;
    font-size: 32rpx;
    font-weight: 500;
    border-radius: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2rpx solid #f44336;
}
</style>
